<template>
  <div class="page-box">
    <div class="page-search">
      <div>
        <label>库位编码</label>
        <el-input v-model="searchForm.LocationNumber" style="width:160px;"></el-input>
      </div>
      <div>
        <label>库位名称</label>
        <el-input v-model="searchForm.LocationName" style="width:160px;"></el-input>
      </div>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <div class="page-section">
      <div class="page-tool">
        <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">批量删除</el-button>

        <el-dropdown class="mg-l">
          <el-button size="small" type="primary" plain>
            <i class="el-icon-s-grid"></i> 
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!--数据表格-->
      <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column  fixed prop="LocationNumber" label="库位编码" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="LocationName" label="库位名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="WarehouseName" label="所属仓库" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="AreaName" label="所属库区" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="Location" label="位置" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="Area" label="面积" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="Charge" label="负责人" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column   label="操作" :show-overflow-tooltip="true">
         <template slot-scope="scope">
          <el-button type="text" @click="update(scope.row)">编辑</el-button>
          <el-button type="text" @click="del(scope.row)">删除</el-button>
         </template>
       </el-table-column>
      </el-table>

      <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
    </div>
    <!--弹窗-->
    <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="40%" @close="closeDialog">
      <WmWarehouseLocationInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible"/>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue';
import WmWarehouseLocationInput from './components/WmWarehouseLocationInput.vue';
export default {
  components:{
    WmWarehouseLocationInput,
    Pagination
  },
    data(){
      return{
        searchForm:{
          LocationNumber:'',
          LocationName:'',
        },
        //对话框
        dialogDomain:{
          tiele:'新增库拉',
          dialogVisible:false
        },
        isUpdate:false,
        //数据模型
        model:{
          LocationNumber:'',//库位编码
          LocationName:'',//库位名称
          WarehouseName:'',//所属仓库
          AreaName:'',//所属库区
          Location:'',//位置
          Area:'',//面积
          Charge:'',//负责人
          Remark:'',//备注
        },
        pageDomain:{
          PageIndex:1,
          PageSize:10,
          TotalCount:0
        },
        isLoading:false,
        tableData:[],
      }
    },
    mounted(){
      this.dataBind();
    },
    methods:{
      //新增的 打开或显示对话框
      add(){
        //标题
        this.dialogDomain.title= "新增库位";
        //对话框可见
        this.dialogDomain.dialogVisible = true;
      },
      //编辑
    update(model){
      console.log(model);
      this.model = model;
      this.dialogDomain.title="编辑库位";
      this.dialogDomain.dialogVisible=true;
      this.isUpdate = true;
    },
    //删除
    del(model){
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.$http.delete('/api/WmWarehouseLocation',{
          data:{
            id:model.Id
          },
          headers:{
            'content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then((res)=>{
          this.showNotify('操作成功','success');
          this.dataBind();
        })
      }).catch(()=>{});  
    },
    //批量删除
    dels(){
      if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))

                this.$http.delete('/api/WmWarehouseLocation/Deleteees',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});     
    },
      //对话框关闭事件
    closeDialog(){
      this.model = {
        LocationNumber:'',//库位编码
          LocationName:'',//库位名称
          WarehouseName:'',//所属仓库
          AreaName:'',//所属库区
          Location:'',//位置
          Area:'',//面积
          Charge:'',//负责人
          Remark:'',//备注
      }
    },
      //是否加载
    search(){
      this.pageDomain.PageIndex=1;
      this.dataBind();
    },
    //重置
      reset(){
        this.searchForm.LocationNumber = '';
        this.searchForm.LocationName = '';
      },
      //分页方法
        handleSizeChange(val){
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val){
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
      //新增编辑页面回调
      callback(){
        let actionName = this.isLoading?'编辑':'新增';
        this.showNotify(actionName+'库位成功','success');
        //对话框不可见
        this.dialogDomain.dialogVisible = false;
        //是否加载
        this.dataBind();
      },
      dataBind(){
        this.isLoading = true;
        this.$http.get('/api/WmWarehouseLocation',{
          params:{
            PageIndex:this.pageDomain.PageIndex,
            PageSize:this.pageDomain.PageSize,
            LocationNumber:this.searchForm.LocationNumber,
            LocationName:this.searchForm.LocationName,
          }
        })
        .then((res) => {
          this.tableData = res.Data;
          this.pageDomain.TotalCount = res.Count;
          this.isLoading = false;
        })
      },

      exports(){
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading:this.$loading(),
                    url: "/api/WmWarehouseLocation/Export",
                    responseType: 'blob'
                }).then((res)=>{
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '库位信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            }).catch((err)=>{
                console.log(err);
            })
    },
    }
}
</script>

<style>

 </style>